<%--
  Created by IntelliJ IDEA.
  User: WanMing
  Date: 2019/2/3
  Time: 14:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>管理页面</title>
    <link rel="stylesheet" href="${ctx}/resources/layui/css/layui.css" media="all">
    <script src="${ctx}/resources/js/jquery.js"></script>
    <script type="text/javascript" src="${ctx}/resources/layui/layui.js"></script>
</head>

<style>
    .laytable-cell-radio {
        padding: 15px 15px 0 15px;
    }
</style>
<body style="margin: 0;padding: 0;border: 0px">

<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">按条件查询</div>
                <div class="layui-card-body">

                    <form class="layui-form" action="" id="formDate">
                        <div class="layui-form-item" style="text-align: center">
                            <div class="layui-inline" style="width: 40%">
                                <label class="layui-form-label">操作员ID:</label>
                                <div class="layui-input-inline">
                                    <input type="tel" name="operatorId"  placeholder="请输入操作员ID" autocomplete="off" class="layui-input" style="width: 400px">
                                </div>
                            </div>
                            <div class="layui-inline" style="width: 40%">
                                <label class="layui-form-label">操作员姓名:</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="operatorName" placeholder="请输入操作员姓名" autocomplete="off" class="layui-input" style="width: 400px">
                                </div>
                            </div>
                        </div>
                    </form>

                    <%--注意此处的按钮应该放在表单外面，防止两次表单提交的影响--%>
                    <div class="layui-form-item">
                        <div class="layui-input-block" style="text-align: center">
                            <button class="layui-btn" lay-submit="" lay-filter="search">搜索</button>
                            <button type="reset" class="layui-btn layui-btn-primary" id="resetOperator">重置</button>
                        </div>
                    </div>


                </div>
            </div>
        </div>

        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">管理列表</div>
                <div class="layui-card-body">
                    <%--数据表格开始--%>
                    <table id="data" lay-filter="test"></table>
                    <%--数据表格结束--%>
                </div>
            </div>
        </div>
    </div>
</div>


<%--添加：--%>
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="addOperator">添加</button>
        </div>
    </div>
</script>

<%--修改和删除--%>
<script type="text/html" id="operatorBar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
    layui.use(['table','form','layer','jquery'], function () {
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;


        //数据表格初始化
        table.render({
            elem: '#data',
            title: '操作员列表',
            text: '<font>查无数据</font>',
            toolbar: '#toolbar',
            skin: 'line',
            id:'reloadOp'
            , even: true
            , height: 280
            , url: '${ctx}/operator/loadAllOperator.action' //数据接口
            , page: true //开启分页
            , cols: [ [ //表头
                {type:'radio',width: 178}
                ,{type: 'numbers', title: '序号', width: 178, align: 'center'}
                , {field: 'operatorId', title: '编号', align: 'center', unresize: false}
                , {field: 'operatorName', title: '姓名', align: 'center', unresize: false}
                , {field: 'isAdmin', title: '权限', align: 'center', unresize: false}
                , {fixed: 'right', title: '操作', width: 178, align: 'center', toolbar: '#operatorBar'}
            ] ]
        });




        //头工具栏事件
        table.on('toolbar(test)', function (obj) {

            //打开添加弹出层
            if(obj.event=='addOperator'){
                layer.open({
                    type: 2,
                    title:["添加操作员","font-size:18px;color:red;"],
                    content: '${ctx}/operator/toAddOperator.action', //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                    anim:0,
                    area:["600","400"]
                });
            }
        });

        //监听行工具事件
        table.on('tool(test)', function (obj) {
            // var data = obj.data;
            //
            // //删除操作
            // if (obj.event === 'del') {
            //     layer.confirm('真的删除行么', function (index) {
            //         obj.del();
            //         layer.close(index);
            //     });
            //     //修改操作
            // } else if (obj.event === 'edit') {
            //     layer.prompt({
            //         formType: 2
            //         , value: data.email
            //     }, function (value, index) {
            //         obj.update({
            //             email: value
            //         });
            //         layer.close(index);
            //     });
            // }
        });


        //监听模糊搜索按钮
        form.on('submit(search)', function(re){
           var Formdata =  $("#formDate").serialize();
            table.reload('reloadOp', {
                url: '${ctx}/operator/loadAllOperator.action?'+Formdata
            });

        });

        //清空表单，支持原生js
        $("#resetOperator").click(function () {
            $("#formDate")[0].reset();
        });





    });





</script>
</body>
</html>
